{% extends "admin/base.html" %}
{% load i18n %}
{% load static %}
{% load admin_urls %}
{% load admin_list %}

{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}"/>
  {% if cl.formset %}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}"/>
  {% endif %}
  {% if cl.formset or action_form %}
    <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
  {% endif %}
  {{ media.css }}
  {% if not actions_on_top and not actions_on_bottom %}
    <style>
      #changelist table thead th:first-child {
        width: inherit
      }
    </style>
  {% endif %}
{% endblock %}

{% block extrahead %}
  {{ block.super }}
  {{ media.js }}
{% endblock extrahead %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
  {% block pretitle %}
    <div id="breadcrumb" style="padding: 24px;">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{% trans 'Home' %}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ cl.opts.verbose_name_plural }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <script>
      new Vue({
        el: '#breadcrumb'
      })
    </script>
  {% endblock %}
  {% block object-tools %}
    <ul class="object-tools" style="display: none;">
      {% block object-tools-items %}
        {{ block.super }}
      {% endblock %}
    </ul>
  {% endblock %}
{% endif %}

{% block coltype %}flex{% endblock %}

{% block content %}
  <div id="content-main">
    {% if cl.formset.errors %}
      <p class="errornote">
        {% if cl.formset.total_error_count == 1 %}
          {% trans "Please correct the error below." %}
        {% else %}
          {% trans "Please correct the errors below." %}
        {% endif %}
      </p>
      {{ cl.formset.non_form_errors }}
    {% endif %}
    <div class="module{% if cl.has_filters %} filtered {% endif %}" id="changelist">
      {% block search %}
        {% search_form cl %}
      {% endblock %}
      {% block date_hierarchy %}
        {% date_hierarchy cl %}
      {% endblock %}

      <form id="changelist-form" method="post"{% if cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
        {% csrf_token %}
        {% if cl.formset %}
          <div>{{ cl.formset.management_form }}</div>
        {% endif %}
        {% block result_list %}
          {% admin_actions %}
          {% result_list cl %}
        {% endblock %}
        {% block pagination %}
          {% pagination cl %}
        {% endblock %}
      </form>
    </div>
  </div>
  <script type="text/javascript">
    $(".object-tools").hide().find('li a').each(function () {
      console.log($(this));
      _action.exts.push({
        name:$(this).text(),
        url:$(this).attr('href')
      })
    })
  </script>
{% endblock %}
